<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>抓老儿游戏 - 游戏界面</title>
    <link rel="stylesheet" href="css/play.css">
</head>
<body>
    <div id="loading-mask" class="loading-mask">
        <div class="loading-text">请稍等...</div>
    </div>
    <div class="game-container">
        <header class="game-header">
            <!-- 上区域：公共扑克牌区域 -->
            <div class="public-cards" id="publicCards">
                <div class="card deck"></div>
                <div class="card back"></div>
                <div class="card back"></div>
                <div class="card back"></div>
                <div class="card back"></div>
                <!-- <div class="card back"></div>
                <div class="card front hearts" data-rank="A" data-suit="♥"></div>
                <div class="card front diamonds" data-rank="K" data-suit="♦"></div>
                <div class="card front clubs" data-rank="10" data-suit="♣"></div> -->
            </div>
        </header>
        <main class="game-main">
            <!-- 中区域：分为左中右三部分 -->
            <div class="player-area left-player">
                <div class="player-cards">
                    <div class="card back"></div>
                    <div class="card back"></div> 
                </div>
                <div class="player-info" id="leftPlayerInfo"></div>
            </div>
            <div class="game-info">
                <div class="game-status" id="gameInfo">请准备</div>
                <div class="game-status" id="gameRound">当前回合 ：第1回合</div>
                <div class="game-pot" id="gamePot">底分: 10</div>
                <div class="public-info-cards" id="publicGameCards">
                    <!-- <div class="card front spades" data-rank="Q" data-suit="♠"></div> -->
                    <div class="cardYS"></div>
                </div>
                <!-- 添加准备按钮 -->
                <button id="prepareButton">准备</button>
            </div>
            <div class="player-area right-player">
                <div class="player-cards">
                    <div class="card back"></div>
                    <div class="card back"></div>
                </div>
                <div class="player-info" id="rightPlayerInfo"></div>
            </div>
        </main>
        <footer class="game-footer">
            <!-- 下区域：自己的扑克牌和信息 -->
            <div class="my-player-area">
                <div class="my-cards" id="myCards">
                    <div class="card back"></div>
                    <div class="card back"></div>
                    <div class="card back"></div>
                    <div class="card back"></div>
                    <div class="card back"></div>
                    <!-- <div class="card front hearts" data-rank="A" data-suit="♥"></div>
                    <div class="card front spades" data-rank="K" data-suit="♠"></div>
                    <div class="card front diamonds" data-rank="Q" data-suit="♦"></div>
                    <div class="card front clubs" data-rank="J" data-suit="♣"></div>
                    <div class="card front hearts" data-rank="10" data-suit="♥"></div> -->
                </div>
                <button id="playCardBtn" class="play-card-btn">出牌</button>
            </div>
            <div class="player-info" id="myPlayerInfo"></div>
        </footer>
    </div>
    <script src="js/cardUtils.js"></script>
    <script src="js/game.js"></script>
    <script src="js/play.js"></script>

    <!-- 结算模块 -->
    <div id="result-modal" class="result-modal">
        <div class="result-container">
            <div class="round-title" id="roundNumber">回合 1</div>
            <div class="players-results">
                <div class="player-result">
                    <div class="player-name">玩家1</div>
                    <div class="player-cards-small">
                        <div class="card small-card front hearts" data-rank="A" data-suit="♥"></div>
                        <div class="card small-card front diamonds" data-rank="K" data-suit="♦"></div>
                        <div class="card small-card front clubs" data-rank="Q" data-suit="♣"></div>
                    </div>
                    <div class="player-score">得分: 100</div>
                </div>
                <div class="player-result winner">
                    <div class="player-name">玩家2</div>
                    <div class="player-cards-small">
                        <div class="card small-card front spades" data-rank="A" data-suit="♠"></div>
                        <div class="card small-card front hearts" data-rank="K" data-suit="♥"></div>
                        <div class="card small-card front diamonds" data-rank="Q" data-suit="♦"></div>
                    </div>
                    <div class="player-score">得分: 200</div>
                </div>
            </div>
            <button class="confirm-btn">确认</button>
        </div>
    </div>
</body>
</html>